<template>
  <div ref="echarts" class="echarts"></div>
</template>

<script>
import {reqAdminEcharts4} from '../../../../api'
export default {
    name:"Echarts4",
    async mounted() {
        const reqData = await reqAdminEcharts4() //获取请求的数据
        const x = []; const y = [];
        reqData.forEach(item => {
            x.unshift(item.amount)
            y.unshift(item.user_name)
        });
        const echarts = this.$refs.echarts //获取dom
        const echartsChart = this.$echarts.init(echarts) //绑定dom
        const option = {
            title: {text: '消费金额前7用户成交额'},
            xAxis: {
                name:'(￥)',
            },
            yAxis: {
                name:'用户',
                data: y
            },
            tooltip: {}, 
            series:{
                type:"bar",
                data: x
            }
        }
        option && echartsChart.setOption(option);
    },
}
</script>

<style scoped>
    .echarts{
        width: 490px;
        height: 295px;
        border-radius: 8px;
        background: white;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 20px 10px;
    }
</style>